<template>
<div class="shopHead" >
    <div class="left u-flex u-flex-1 u-row-between u-col-center">
      <div class="u-flex u-row-between u-col-center">
      <u-avatar :src="shop.logo" size="mini"></u-avatar>
        <p class="shopName u-line-1 u-m-l-10">{{shop.shop_name}}</p>
      </div>
      <u-tag text="进店" type="warning" shape="circle" style="justify-self:flex-end" @click="$u.route({url:'/pagesC/homeSon/storeDetails',params:{shop_id:shop.id}})"></u-tag>

    </div>
    <div style="overflow:scroll">
        <view class="shopGoodsBox">
            <block v-for="(goods,index) in shop.goodres" :key="index">
                <goodsCard :info="goods" class="goodsItem" />
            </block>
        </view>
    </div>

</div>
</template>

<script>
import goodsCard from "../goodsCard"
export default {
    name: "shopItem",
    components: {
        goodsCard,

    },
    props: {
        shop: {
            type: Object,
            required: true,
            default: () => {
                {}
            }
        }

    }
}
</script>

<style lang="scss" scoped>
.shopHead {
    background-color: #fff;
    border-radius: 12upx;
    margin: 15upx;
    padding: 15upx 20upx;
    .left {
        display: flex;
        align-items: center;

        .shopLogo {
            width: 80upx;
            height: 80upx;
            border-radius: 400upx;
            margin-right: 12upx;
        }

        .shopName {
            font-size: 32upx;
        }
    }

    .shopGoodsBox {
        margin: 14upx 0;
        display: flex;
        flex-wrap: nowrap;

        .goodsItem {
            flex-basis: 300upx;
            width: 48%;
            margin-right: 2%;
            display: inline-block;
        }
    }
}
</style>
